import { Component, Vue } from 'vue-property-decorator'
import mapboxgl from 'mapbox-gl'
import mapUtils from '@/components/gis/map-package/map-utils'
import CoordinatesControl from '@/components/gis/map-package/map-controls/coordinates-control'
import '@/components/gis/map-package/map-controls/map-control-style.less'
import GisStore from '@/store/modules/gis'

@Component({})
export default class GisMapMixin extends Vue {
  public mapBox: any = null // 实例化地图
  public mapLegend: boolean = false

  // mapbox popup 要素详情
  public mapboxPopup: any = new mapboxgl.Popup({
    closeButton: false,
    closeOnClick: false,
  })
  // 鼠标经纬度位置
  public coordinatesControl: any = new CoordinatesControl({
    decimal: 4, // 经纬度精度
  })
  // 比例尺
  public mapScale = new mapboxgl.ScaleControl({
    maxWidth: 100, // 比例尺控制的最大长度,默认100，以像素为单位
    unit: 'metric', // 单位，分为 'imperial', 'metric','nautical' 三种类型，默认为 'metric'
  })

  /**
   * 添加 / 移除 经纬度坐标位置控件 （自定义）
   */
  public addCoordinatesControlMixin(value: boolean) {
    if (!this.mapBox) {
      return
    }
    if (value) {
      this.mapBox.addControl(this.coordinatesControl, 'bottom-left')
    } else {
      this.mapBox.removeControl(this.coordinatesControl)
    }
  }

  /**
   * 添加 / 移除 比例尺
   * @param value 添加 - true / 移除 - false
   */
  public addOrRemoveScaleControl(value: boolean) {
    if (!this.mapBox) {
      return
    }
    if (value) {
      this.mapBox.addControl(this.mapScale, 'bottom-left')
    } else {
      this.mapBox.removeControl(this.mapScale)
    }
  }

  /**
   * 初始化添加空图层
   */
  public initAddEmpty() {
    const emptyLayerExist = this.mapBox.getLayer('base-empty-layer')
    if (!emptyLayerExist) {
      const layerInfo: any = {
        id: 'base-empty-layer',
        type: 'fill',
        source: {
          type: 'geojson',
          data: null,
        },
      }
      this.mapBox.addLayer(layerInfo)
    }
  }

  // 添加点
  public addPoint(layer: any, beforeId: string) {
    mapUtils.addPoint(this.mapBox, layer, beforeId)
  }

  // 添加线
  public addLine(layer: any, beforeId: string) {
    mapUtils.addLine(this.mapBox, layer, beforeId)
    if (layer.data?.hasArrow) {
      this.addArrowLayer(layer, beforeId)
    }
  }

  public addArrowLayer(layer: any, beforeId: string) {
    const layerDataInfo: any = GisStore.layerData[layer.id] || { geojson: null }
    const { geojson } = layerDataInfo
    mapUtils.addArrowLayerByLineLayer(this.mapBox, layer, geojson, beforeId)
  }

  // 添加面
  public addPolygon(layer: any, beforeId: string) {
    mapUtils.addPolygon(this.mapBox, layer, beforeId)
  }

  // 添加面
  public addLabel(layer: any, beforeId: string) {
    mapUtils.addPolygon(this.mapBox, layer, beforeId)
  }
}
